Firstly to reiterate, this is a fictional game and is purely for fun and self-improvement, and is currently in the early stages of design. My aim is to use the Overwatch IP to create an exciting iPad hero brawler UI mockup in the style of games like Injustice: Gods Among Men or Marvel: Contest of Champions. Currently I'm exploring both the layouts of similar games on the market, as well as adapting the Overwatch UI art style for a companion app.
Potential basic title designs and layouts for Heroes of Overwatch, created in Illustrator. The next step will be to work up the most appealing design into a polished title graphic.
Basic concepts for the Heroes of Overwatch logo, created in Illustrator. The challenge has been finding the balance between creating a new icon without losing the iconic design of the original Overwatch logo. Much like the title designs, my plan is to work up one or two logos into a finished icon.
Potential HUD concept created using Photoshop and Illustrator. The individual HUD elements have been chosen from various concepts (shown below) and combined to create a cohesive overlay.
As most mobile games in this genre use collectable cards to represent heroes, I've created unique designs which reflect the appearance, theme or abilities of each hero. While most collectable cards have portrait layouts, I wanted to present a more 'business card' feel, so that it seems like you're hiring the heroes rather than simply collecting them.
Ability gauge concepts for the HUD created in Illustrator, showing the three different states of the icons; filled, part-filled and empty. I used the Overwatch Ultimate Ability gauge as a reference, but I've tried to create some interesting new variations.
Health bar designs and layouts for the HUD, created in Illustrator. Using the competitive analysis (shown below) and Overwatch's health bar designs as reference, I've recreated the Overwatch health bar with various new information.
Several HUD wireframe designs based on the competitive analysis shown below. I'll collect feedback on these designs, and work up the best wireframe using polished assets.
Several HUD wireframe designs based on the competitive analysis shown below. I'll carry out the same process discussed above for these wireframes.
Competitive analysis for main menus in similar brawler/hero based games using SWOT analysis and identifying common trends. I went on to create various wireframe designs based on my findings, shown above.
Competitive analysis for HUDs in similar hero/brawler based games. Much like the main menu wireframes, I'll create a variety of layouts to choose from before moving on to a more refined versoin.
